<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="24" :xs="24">
                <el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
                    <el-form-item label="文章标题" prop="title">
                        <el-input v-model="queryParams.title" placeholder="请输入博客标题" clearable size="small"
                            style="width: 240px" @keyup.enter.native="handleQuery" />
                    </el-form-item>
                    <el-form-item label="摘要" prop="summary">
                        <el-input v-model="queryParams.summary" placeholder="请输入摘要" clearable size="small"
                            style="width: 240px" @keyup.enter.native="handleQuery" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    </el-form-item>
                </el-form>

                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="el-icon-plus" size="mini"
                            @click="handleAdd">新增</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="danger" plain icon="el-icon-delete" size="mini"
                            @click="handleDelete">删除</el-button>
                    </el-col>
                </el-row>

                <el-table :data="articleList" style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="id" label="文章ID" align="center" />
                    <el-table-column prop="title" label="标题" align="center" />
                    <el-table-column prop="summary" label="摘要" align="center" />
                    <el-table-column prop="createTime" label="创建时间" align="center" />

                    <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" icon="el-icon-edit"
                                @click="handleUpdate(scope.row)">修改</el-button>
                            <el-button size="mini" type="text" icon="el-icon-delete"
                                @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-pagination :page-size.sync="queryParams.pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total" :page-sizes="[10, 20, 30, 40]" :current-page.sync="queryParams.pageNum"
            @current-change="getList" @size-change="getList" />

    </div>
</template>

<script>
import {listArticle, delArticle} from '@/api/content/article'

export default {
    name: 'Article',
    data() {
        return {
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                userName: undefined,
                phonenumber: undefined,
                status: undefined
            },
            title: '',
            // 是否显示弹出层
            open: false,
            // 总条数
            total: 0,
            articleList: [],
            showSearch: true
        }
    },
    watch: {},
    created() {
        this.getList()
    },
    methods: {
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
        },
        /** 查询文章列表 */
        getList() {
            this.loading = true
            listArticle(this.queryParams).then((response) => {
                this.articleList = response.data.rows
                this.total = response.data.total
                this.loading = false
            })
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.$router.push('/content/write?id=' + row.id)
        },
        /** 新增文章 */
        handleAdd() {
            this.$router.push('/content/write')
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids
            this.$modal.confirm('是否确认删除分类编号为"' + ids + '"的数据项？').then(function () {
                return delArticle(ids)
            }).then(() => {
                this.getList()
                this.$modal.msgSuccess('删除成功')
            }).catch(() => { })
        }
    }
}
</script>